OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础

发表于 | 更新于 | 分类于

因为下面的内容会分模块介绍源码，所以这里为了方便，首先介绍源码的目录结构
在OpenLayers 3官网的下载页面下载我们在开发工程中需要的文件(如：v3.17.1.zip)，注意如果需要编译源代码，需要下载包含编译功能的文件包：https://github.com/openlayers/ol3/releases 下载指定release版本的源码，注意是Source code (zip)或者Source code (tar.gz)。
ol3源码目录结构.png

  • apidoc是ol3的api文档，打开ol.html就可以在浏览器中离线使用，当然也可以在官网中查看api；
  • build是ol3编译过的文件，工程开发中可以直接使用，下部分的案例是基于离线的源码的；
  • closure-library是google的closure库文件夹；
  • css里面只有ol.css一个文件，是定义ol3的全局样式，项目开发中需要引入；
  • doc提供给我们一些的案例，打开quickstart.html即可看到快速开始的案例；
  • examples是比较丰富的例子，和官网中的examples一样；
  • ol就是我们要分析的源码文件夹；
  • ol.ext是ol3所要使用的js库。

ol/ol文件夹下是我们分析的源码，分析基本思路：文件夹下的文件是公用的部分(A部分)，文件夹是分部分写的(B部分)。

0.底层基础

0.1 ol.js

第一行就可以看出，ol.js提供全局的第一命名空间ol

1
goog.provide('ol');

唯一的一个方法是：继承

1
2
3
4
ol.inherits = function(childCtor, parentCtor) {
  childCtor.prototype = Object.create(parentCtor.prototype);
  childCtor.prototype.constructor = childCtor;
};

0.2 object.js

1
2
3
4
5
6
7
8
goog.provide('ol.Object');
goog.provide('ol.ObjectEvent');
goog.provide('ol.ObjectEventType');

goog.require('ol.Observable');
goog.require('ol.events');
goog.require('ol.events.Event');
goog.require('ol.object');

ol命名空间下所有的基本对象，比如map对象，feature矢量地图对象，都应该建立在ol.Object基础上。如：

map.js

1
2
ol.Object.call(this);
ol.inherits(ol.Map, ol.Object);

feature.js

1
2
ol.Object.call(this);
ol.inherits(ol.Feature, ol.Object);

通过这行代码：

1
ol.inherits(ol.Object, ol.Observable);

我们发现ol.Object继承ol.Observable
Observable.js

1
ol.inherits(ol.Observable, ol.events.EventTarget);

我们发现ol.Observable继承ol.EventTarget；
这样，我们可以知道继承ol.Object后也就继承了基础事件ol.events。

0.3 events.js

ol3的基础事件

1
2
3
4
5
goog.provide('ol.events');
goog.provide('ol.events.EventType');
goog.provide('ol.events.KeyCode');

goog.require('ol.object');

提供的所有基础事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ol.events.EventType = {
  CHANGE: 'change',
  CLICK: 'click',
  DBLCLICK: 'dblclick',
  DRAGENTER: 'dragenter',
  DRAGOVER: 'dragover',
  DROP: 'drop',
  ERROR: 'error',
  KEYDOWN: 'keydown',
  KEYPRESS: 'keypress',
  LOAD: 'load',
  MOUSEDOWN: 'mousedown',
  MOUSEMOVE: 'mousemove',
  MOUSEOUT: 'mouseout',
  MOUSEUP: 'mouseup',
  MOUSEWHEEL: 'mousewheel',
  MSPOINTERDOWN: 'mspointerdown',
  RESIZE: 'resize',
  TOUCHSTART: 'touchstart',
  TOUCHMOVE: 'touchmove',
  TOUCHEND: 'touchend',
  WHEEL: 'wheel'
};

我们分析一下提供的几个方法

1
2
3
4
ol.events.bindListener_ = function(listenerObj) {};
ol.events.listen = function(target, type, listener, opt_this, opt_once) {};
ol.events.unlisten = function(target, type, listener, opt_this) {};
ol.events.unlistenAll = function(target) {};

其中方法名末尾带有”_”为私有方法，不带的为提供出去的共有方法。

0.4 math.js

提供基础的数学运算方法，角度转化弧度函数如：

1
2
3
ol.math.toRadians = function(angleInDegrees) {
  return angleInDegrees * Math.PI / 180;
};

0.5 animation.js

提供bounce、pan、rotate、zoom四种方法

0.6 collection.js

对ol命名空间下的对象集合的操作。

1
2
3
4
5
6
goog.provide('ol.Collection');
goog.provide('ol.CollectionEvent');
goog.provide('ol.CollectionEventType');

goog.require('ol.events.Event');
goog.require('ol.Object');
1
2
3
4
ol.CollectionEventType = {
  ADD: 'add'
  REMOVE: 'remove'
};

继承

1
2
ol.inherits(ol.CollectionEvent, ol.events.Event);
ol.inherits(ol.Collection, ol.Object);

方法举例：

1
2
3
4
5
6
7
8
9
10
ol.Collection.prototype.remove = function(elem) {
  var arr = this.array_;
  var i, ii;
  for (i = 0, ii = arr.length; i < ii; ++i) {
    if (arr[i] === elem) {
      return this.removeAt(i);
    }
  }
  return undefined;
};

0.7 uri.js

通过url加载地图，其中params包含请求地图的宽、高、分辨率、地图范围

1
2
3
4
5
6
7
8
9
10
ol.uri.appendParams = function(uri, params) {
  var qs = Object.keys(params).map(function(k) {
    return k + '=' + encodeURIComponent(params[k]);
  }).join('&');
  // remove any trailing ? or &
  uri = uri.replace(/[?&]$/, '');
  // append ? or & depending on whether uri has existing parameters
  uri = uri.indexOf('?') === -1 ? uri + '?' : uri + '&';
  return uri + qs;
};